<template>
    <div class="preferential-container-wrap dyj-container-wrap">
        <div class="mylcj-wrap">
            <p class="mylcj-title">我的抵用金(元)</p>
            <p class="mylcj-tatal">{{formatMoney(dyjcount.unusedLcjValue/100)}}</p>
        </div>
        <mt-navbar v-model="selected">
            <mt-tab-item id="1">可使用({{dyjcount.unusedLcjCount}})</mt-tab-item>
            <mt-tab-item id="3">已过期({{dyjcount.expiredLcjCount}})</mt-tab-item>
            <mt-tab-item id="2">已使用({{dyjcount.usedLcjCount}})</mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="selected" swipeable="swipeable">
            <mt-tab-container-item id="1">
                <div>
                    <mt-loadmore :bottom-method="ksyLoadBottom" :bottom-all-loaded="ksyAllLoaded" ref="ksyloadmore">
                        <div class="couponlist-cont">
                            <DyjList :list="ksyList" :isLoading="isLoading" :couponstate="selected" />
                        </div>
                    </mt-loadmore>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="3">
                <div>
                    <mt-loadmore :bottom-method="ygqLoadBottom" :bottom-all-loaded="ygqAllLoaded" ref="ygqloadmore">
                        <div class="couponlist-cont">
                            <DyjList :list="ygqList" :isLoading="isLoading" :couponstate="selected" />
                        </div>
                    </mt-loadmore>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <div>
                    <mt-loadmore :bottom-method="ysyLoadBottom" :bottom-all-loaded="ysyAllLoaded" ref="ysyloadmore">
                        <div class="couponlist-cont">
                            <DyjList :list="ysyList" :isLoading="isLoading" :couponstate="selected" />
                        </div>
                    </mt-loadmore>
                </div>
            </mt-tab-container-item>
        </mt-tab-container>
    </div>
</template>
<script>
  import axios from '~/plugins/axios'
  import { Toast } from 'mint-ui'
  import formatMoney from '~/helper/formatMoney.js'
  import DyjList from './dyj-coupon-list'
  export default {
    name: 'dyj',
    props: {
      dyjcount: {
        type: Object
      }
    },
    components: {
      DyjList
    },
    data () {
      return {
        selected: '1',
        swipeable: false,
        ksyAllLoaded: true,
        ygqAllLoaded: true,
        ysyAllLoaded: true,
        isLoading: false,
        ksyHasQuery: false,
        ygqHasQuery: false,
        ysyHasQuery: false,
        ksyList: [],
        ygqList: [],
        ysyList: [],
        ksy: {
          pageIndex: 1,
          pageSize: 20,
          state: 1
        },
        ygq: {
          pageIndex: 1,
          pageSize: 20,
          state: 3
        },
        ysy: {
          pageIndex: 1,
          pageSize: 20,
          state: 2
        }
      }
    },
    mounted () {
      // if (!this.ksyHasQuery) {
      //   this.queryLcjListByStatus(this.ksy, 'ksyList', 'ksyHasQuery')
      // }
    },
    watch: {
      // 如果 `active` 发生改变，这个函数就会运行
      selected (newActive, oldActive) {
        if (this.isLoading) {
          this.selected = oldActive
        }
        // else if (newActive === '1' && !this.ksyHasQuery) {
        //   this.queryLcjListByStatus(this.ksy, 'ksyList', 'ksyHasQuery')
        // } else if (newActive === '3' && !this.ygqHasQuery) {
        //   this.queryLcjListByStatus(this.ygq, 'ygqList', 'ygqHasQuery')
        // } else if (newActive === '2' && !this.ysyHasQuery) {
        //   this.queryLcjListByStatus(this.ysy, 'ysyList', 'ysyHasQuery')
        // }
      }
    },
    methods: {
      ksyLoadBottom () {
        console.log('ksyloadmore')
        this.queryLcjListByStatus(this.ksy, 'ksyList', 'ksyHasQuery', 'ksyAllLoaded', 'ksyloadmore')
      },
      ygqLoadBottom () {
        console.log('ygqloadmore')
        this.queryLcjListByStatus(this.ygq, 'ygqList', 'ygqHasQuery', 'ygqAllLoaded', 'ygqloadmore')
      },
      ysyLoadBottom () {
        console.log('ysyloadmore')
        this.queryLcjListByStatus(this.ysy, 'ysyList', 'ysyHasQuery', 'ysyAllLoaded', 'ysyloadmore')
      },
      formatMoney (money) {
        return formatMoney.formatMoney(money)
      },
      queryLcjListByStatus (datas, list, hasQuery, allLoaded, refsName) {
        this.isLoading = true
        var datas = datas
        axios.post('/api/queryLcjListByStatus', datas).then((resp) => {
          this.isLoading = false
          console.log('1111')
          console.log(resp.data)
          if (resp && resp.data && resp.data.responseCode === 0) {
            this[list] = resp.data.pagination.resultList
            this[hasQuery] = true
            if (resp.data.pagination.totalCount > resp.data.pagination.resultList.length) {
              this[allLoaded] = false
              datas.pageSize = datas.pageSize + 20
              this[datas] = datas
              this.$refs[refsName].onBottomLoaded()
            } else {
              this[allLoaded] = true
            }
          } else {
            Toast(resp.data.responseMessage)
          }
        }).catch(errors => {
          this.isLoading = false
          Toast('接口异常')
        })
      }
    }
  }
</script>
<style lang="sass" src="~/assets/sass/coupon-cont.sass"></style>